<template>
	<slot v-if="addAth" >
		<el-button size="small" type="text" @click="onOpenAddMenu">新增</el-button>
	</slot>

    <slot v-if="editAth" >
		<el-button size="small" type="text" @click="onOpenEditMenu">修改</el-button>
	</slot>

	<slot v-if="deleteAth" >
		<el-button size="small" type="text" @click="onTabelRowDel">删除</el-button>
	</slot>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from '/@/store/index';
export default defineComponent({
	name: 'auth',
	props: {
		add: {
			type: String,
			default: () => '',
		},
		edit: {
			type: String,
			default: () => '',
		},
		delete: {
			type: String,
			default: () => '',
		},
	},
	setup(props,context) {
		const store = useStore();
		// 获取 vuex 中的用户权限
		const addAth = computed(() => {
			return store.state.userInfos.userInfos.authBtnList.some((v: string) => v === props.add);
		});
        const editAth = computed(() => {
			return store.state.userInfos.userInfos.authBtnList.some((v: string) => v === props.edit);
		});
		const deleteAth = computed(() => {
			return store.state.userInfos.userInfos.authBtnList.some((v: string) => v === props.delete);
		});

		// 打开新增菜单弹窗
		const onOpenAddMenu = () => {
			context.emit('onOpenAddMenu');
		};
		// 打开编辑菜单弹窗
		const onOpenEditMenu = () => {
			context.emit('onOpenEditMenu');
		};
		// 删除当前行
		const onTabelRowDel = () => {
			context.emit('onTabelRowDel');
		};
		return {
			addAth,
            editAth,
			deleteAth,
			onOpenAddMenu,
			onOpenEditMenu,
			onTabelRowDel,
		};
	},
});
</script>
